<template>
	<div class="floating-button" @click="onClick">
		<slot>
			<!-- 这里可以放置默认的按钮样式等 -->
		</slot>
	</div>
</template>

<script>
	export default {
		name: 'FloatButton',
		props: {

		},
		data() {
			return {

			};
		},
		mounted() {

		},
		methods: {
			onClick() {
				this.$emit('click');
			}
		},
		computed: {

		}
	};
</script>

<style>
	.floating-button {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 58px;
		height: 58px;
		border-radius: 50%;
		background-color: #007aff;
		color: #fff;

		position: fixed;
		/* right: 20rpx;
		bottom: 20rpx; */
		/* 网站类型 */
		right: 10px;
		bottom: 60px;
	}

	/* 按钮点击之后会产生偏移 */
	.floating-button:active {
		transform: translate(0, 2px);
	}
</style>